<template>
  <div class="contain-body abfa-box">
    <Title></Title>
    <div class="search-contain-body">
      <el-form ref="form" inline :model="form" label-width="75px">
        <el-form-item>
          <div class="d-ib font-table" slot="label">车牌号码：</div>
          <el-input v-model="form.jdcJdchphms"></el-input>
        </el-form-item>
		<el-form-item>
		  <div class="d-ib font-table" slot="label">车辆型号：</div>
		  <el-select v-model="form.jdcClxhs" placeholder="请选择车辆型号">
			<el-option label="" value="">--请选择车辆型号--</el-option>
		    <el-option label="1" value=""></el-option>
		    <el-option label="2" value=""></el-option>
		  </el-select>
		</el-form-item>
		<el-form-item>
		  <div class="d-ib font-table" slot="label">姓名：</div>
		  <el-input v-model="form.zdrxxXms"></el-input>
		</el-form-item>
		<el-form-item>
		  <div class="d-ib font-table" slot="label">身份号码：</div>
		  <el-input v-model="form.zdrxxGmsfhms"></el-input>
		</el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" class="button-search" @click="onSubmit">搜索</el-button>
		  <!-- <el-button icon="el-icon-delete" class="button-delete" @click="doclear">清空</el-button> -->
        </el-form-item>
      </el-form>

    </div>
    <div>
      <div class="pos-r">
        <Title msg="信息列表"></Title>
        <div class="pos-a" style="right: 0">
          <el-button @click="openOptions('add')" type="primary" icon="el-icon-plus">
            新增
          </el-button>
        </div>
      </div>
      <CustomTable
          :columns="columns"
		  :total="total"
          :table-data="tableData"
		  :pagination="pagination"
		  @pagination="paginationChange">
        <div slot="options" slot-scope="scope">
          <el-button @click="openOptions('details',scope.data)" style="margin-left: 4px;" class="button-blur">详情</el-button>
          <el-button @click="openOptions('update',scope.data)" style="margin-left: 4px;" class="button-green">编辑</el-button>
          <el-button @click="deleteDate(scope.data)" style="margin-left: 4px;" class="button-red">删除</el-button>
        </div>
      </CustomTable>
    </div>

    <el-dialog
        width="819px"
        center
        :class="['custom-dialog-fill','font-table']" title=""
        :visible.sync="dialog.open"
		:close-on-click-modal="false">

      <div class="dialog-title" slot="title">
        {{ dialog.title }}
      </div>

      <div class="d-f jc-c">

        <el-form class="font-table " style="color: #000000;" ref="form" :model="form" label-width="75px" v-if="dialog.type!='details'">
          <div class="d-f jc-c form-security">
        	  <el-form-item>
        	  <div class="d-ib font-table" slot="label">车牌号码：</div>
        		<el-input v-model="form.jdcJdchphm"></el-input>
        	  </el-form-item>
        	  <el-form-item>
        		<div class="d-ib font-table" slot="label">车辆型号：</div>
        		<el-select v-model="form.jdcClxh" placeholder="请选择车辆型号">
        			<el-option label="1" value="1"></el-option>
        			<el-option label="2" value="2"></el-option>
        		</el-select>
        	  </el-form-item>
          </div>
          <div class="d-f jc-c form-security">
        	  <el-form-item>
        	  <div class="d-ib font-table" slot="label">中文名：</div>
        		<el-input v-model="form.jdcZwppmc"></el-input>
        	  </el-form-item>
        	  <el-form-item>
        		<div class="d-ib font-table" slot="label">英文名：</div>
        		<el-input v-model="form.jdcYwppmc"></el-input>
        	  </el-form-item>
          </div>
          <div class="d-f jc-c form-security">
        	  <el-form-item>
        		<div class="d-ib font-table" slot="label">车身颜色：</div>
        		<el-select v-model="form.jdcJdccsysdm" placeholder="请选择车身颜色">
        		  <el-option
        		    v-for="item in optionsCsys"
        		    :key="item.value"
        		    :label="item.content"
        		    :value="item.id">
        		  </el-option>
        		</el-select>
        	  </el-form-item>
        	  <el-form-item>
        		<div class="d-ib font-table" slot="label">姓名：</div>
        		<el-input v-model="form.zdrxxXm"></el-input>
        	  </el-form-item>
          </div>
          <div class="d-f jc-c form-security">
        	  <el-form-item>
				<div class="d-ib font-table" slot="label">身份号码：</div>
        		<el-input v-model="form.zdrxxGmsfhm"></el-input>
        	  </el-form-item>
        	  <el-form-item>
				<div class="d-ib font-table" slot="label">年龄：</div>
        		<el-input v-model="form.zdrxxNl"></el-input>
        	  </el-form-item>
          </div>
		  <div class="d-f jc-c form-security">
			  <el-form-item>
				<div class="d-ib font-table" slot="label">民族：</div>
				<el-select v-model="form.zdrxxMzdm" placeholder="请选择民族">
				  <el-option label="" value="">--请选择民族--</el-option>
				  <el-option
				    v-for="item in optionsMz"
				    :key="item.value"
				    :label="item.content"
				    :value="item.id"> 
				  </el-option>
				</el-select>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">籍贯国家：</div>
				<el-select v-model="form.zdrxxJggjdqdm" placeholder="请选择籍贯国家" filterable>
				  <el-option label="" value="">--请选择国籍--</el-option>
				  <el-option
				    v-for="item in optionsGj"
				    :key="item.value"
				    :label="item.content"
				    :value="item.id">
				  </el-option>
				</el-select>
			  </el-form-item>
		  </div>
		  <div class="d-f jc-c form-security">
			  <el-form-item>
				<div class="d-ib font-table" style="margin-left: -41%;">籍贯省市县：</div>
				<el-input v-model="form.zdrxxJgssxdm"></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">行政区划：</div>
				<el-input v-model="form.zdrxxXzqhdm"></el-input>
			  </el-form-item>
		  </div>
		  <el-form-item>
			<div class="d-ib font-table" slot="label">详细地址：</div>
			<el-input v-model="form.zdrxxQhnxxdz"></el-input>
		  </el-form-item>
          <div class="d-f jc-c form-security">
			  <el-form-item>
				<div class="d-ib font-table" slot="label">学历：</div>
				<el-select v-model="form.zdrxxXldm" placeholder="请选择学历">
				  <el-option label="" value="">--请选择学历--</el-option>
				  <el-option
				    v-for="item in optionsXl"
				    :key="item.value"
				    :label="item.content"
				    :value="item.id">
				  </el-option>
				</el-select>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">婚姻状况：</div>
				<el-select v-model="form.zdrxxHyzkdm" placeholder="请选择婚姻状况">
				  <el-option label="" value="">--请选择婚姻状况--</el-option>
				  <el-option
				    v-for="item in optionsHyzk"
				    :key="item.value"
				    :label="item.content"
				    :value="item.id">
				  </el-option>
				</el-select>
			  </el-form-item>
          </div>
		  <div class="d-f jc-c form-security">
			  <el-form-item>
				<div class="d-ib font-table" slot="label">性别：</div>
				<el-select v-model="form.zdrxxXbdm" placeholder="请选择性别">
				  <el-option label="" value="">--请选择性别--</el-option>
				  <el-option
					v-for="item in optionsXb"
					:key="item.value"
					:label="item.content"
					:value="item.id">
				  </el-option>
				</el-select>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">政治面貌：</div>
				<el-select v-model="form.zdrxxZzmmdm" placeholder="请选择政治面貌">
				  <el-option label="" value="">--请选择政治面貌--</el-option>
				  <el-option
					v-for="item in optionsZzmm"
					:key="item.value"
					:label="item.content"
					:value="item.id">
				  </el-option>
				</el-select>
			  </el-form-item>
		  </div>
        </el-form>
        
        <el-form class="font-table " style="color: #000000;" ref="form" :model="form" label-width="75px" v-if="dialog.type=='details'">
          <div class="d-f jc-c form-security">
			  <el-form-item>
			  <div class="d-ib font-table" slot="label">车牌号码：</div>
				<el-input v-model="form.jdcJdchphm" readonly></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">车辆型号：</div>
				<el-input v-model="form.jdcClxh" readonly></el-input>
			  </el-form-item>
          </div>
          <div class="d-f jc-c form-security">
			  <el-form-item>
			  <div class="d-ib font-table" slot="label">中文名：</div>
				<el-input v-model="form.jdcZwppmc" readonly></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">英文名：</div>
				<el-input v-model="form.jdcYwppmc" readonly></el-input>
			  </el-form-item>
          </div>
          <div class="d-f jc-c form-security">
			  <el-form-item>
				<div class="d-ib font-table" slot="label">车身颜色：</div>
				<el-input v-model="form.jdcJdccsysmc" readonly></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">姓名：</div>
				<el-input v-model="form.zdrxxXm" readonly></el-input>
			  </el-form-item>
          </div>
          <div class="d-f jc-c form-security">
			  <el-form-item>
				<div class="d-ib font-table" slot="label">身份号码：</div>
				<el-input v-model="form.zdrxxGmsfhm" readonly></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">年龄：</div>
				<el-input v-model="form.zdrxxNl" readonly></el-input>
			  </el-form-item>
          </div>
          <div class="d-f jc-c form-security">
			  <el-form-item>
				<div class="d-ib font-table" slot="label">民族：</div>
				<el-input v-model="form.zdrxxMzmc" readonly></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">籍贯：</div>
				<el-input v-model="form.zdrxxJgssxmc" readonly></el-input>
			  </el-form-item>
          </div>
          <div class="d-f jc-c form-security">
			  <el-form-item>
				<div class="d-ib font-table" style="margin-left: -41%;">籍贯省市县：</div>
				<el-input v-model="form.zdrxxGmsfhm" readonly></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">行政区划：</div>
				<el-input v-model="form.zdrxxXzqhdm" readonly></el-input>
			  </el-form-item>
          </div>
          <el-form-item>
			<div class="d-ib font-table" slot="label">详细地址：</div>
			<el-input v-model="form.zdrxxQhnxxdz" readonly></el-input>
          </el-form-item>
          <div class="d-f jc-c form-security">
			  <el-form-item>
				<div class="d-ib font-table" slot="label">学历：</div>
				<el-input v-model="form.zdrxxXlmc" readonly></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">婚姻状况：</div>
				<el-input v-model="form.zdrxxHyzkmc" readonly></el-input>
			  </el-form-item>
          </div>
		  <div class="d-f jc-c form-security">
			  <el-form-item>
				<div class="d-ib font-table" slot="label">性别：</div>
				<el-input v-model="form.zdrxxXbmc" readonly></el-input>
			  </el-form-item>
			  <el-form-item>
				<div class="d-ib font-table" slot="label">政治面貌：</div>
				<el-input v-model="form.zdrxxZzmmmc" readonly></el-input>
			  </el-form-item>
		  </div>
        </el-form>
      </div>
      <div class="d-f jc-c">
        <div v-if="dialog.type=='details'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">确 定
          </el-button>
        </div>
        <div v-if="dialog.type=='add'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">取 消
          </el-button>
          <el-button
              class="button-submit mr58"
              @click="addZdrcl">确 定
          </el-button>
        </div>
        <div v-if="dialog.type=='update'">
          <el-button
              class="button-cancel"
              @click="dialog.open = false">取 消
          </el-button>
          <el-button
              class="button-submit mr58"
              @click="updateZdrcl">确 定
          </el-button>
        </div>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import Title from "../../components/Title";
import CustomTable from "../../components/CustomTable";
import dxhdUrl from "../../config/config";
import formateDate from "../../config/date";

export default {
  name: "Abfa",
  components: {Title, CustomTable,dxhdUrl,formateDate},
  data() {
    return {
	  optionsCsys:{},
	  optionsMz:{},
	  optionsGj:{},	
	  optionsXl:{},
	  optionsHyzk:{},
	  optionsXb:{},
	  optionsZzmm:{},
	  total: 0,
	  pagination: {},
      dialog: {
        title: 's',
        open: false,
        type: 'details',//'edit','add','details'
      },
      form: {
        name: '',
        schemeName: '',
        activityName: '',
        region: '',
        date: '',
        bigEvent: '',
        shape: '',
        approval: '',
        desc: '',
        remark: ''
      },
      tableData: [
        
      ],
      params: {
        current: 1,
        size: 10,

      },
      columns: [
        {
          key: 'jdcJdchphm',
          label: '车牌号码'
        },
		{
		  key: 'zdrxxXm',
		  label: '姓名'
		},
		{
		  key: 'zdrxxGmsfhm',
		  label: '身份号码'
		},
		{
		  key: 'zdrxxNl',
		  label: '年龄'
		},
		{
		  key: 'zdrxxMzmc',
		  label: '民族'
		},
		{
		  key: 'zdrxxXbmc',
		  label: '性别'
		},
        {
          key: 'options',
          label: '操作',
          width: '243px',
          slot: true
        }
      ],
    }
  },
  mounted() {
    this.selectData();
  },
  methods: {
    onSubmit() {
      this.getList(this.pagination.pageNum, this.pagination.pageSize);
    },
	selectData() {
	  let optionsCsys = new Array();
	  let optionsMz = new Array();
	  let optionsGj = new Array();
	  let optionsXl = new Array();
	  let optionsHyzk = new Array();
	  let optionsXb = new Array();
	  let optionsZzmm = new Array();
	  this.axios.post(dxhdUrl.dxhdUrl+'t-dictionary/selectList', null
	  ).then((res) => {
	    if(res.code == '1'){
			for (var obj in res.data) {
				if(res.data[obj].type == 'CSYS'){
					optionsCsys.push(res.data[obj]);
				}
				if(res.data[obj].type == 'MZ'){
					optionsMz.push(res.data[obj]);
				}
				if(res.data[obj].type == 'GJ'){
					optionsGj.push(res.data[obj]);
				}
				if(res.data[obj].type == 'XL'){
					optionsXl.push(res.data[obj]);
				}
				if(res.data[obj].type == 'HYZK'){
					optionsHyzk.push(res.data[obj]);
				}
				if(res.data[obj].type == 'XB'){
					optionsXb.push(res.data[obj]);
				}
				if(res.data[obj].type == 'ZZMM'){
					optionsZzmm.push(res.data[obj]);
				}
			}
			this.optionsCsys = optionsCsys;
			this.optionsMz = optionsMz;
			this.optionsGj = optionsGj;
			this.optionsXl = optionsXl;
			this.optionsHyzk = optionsHyzk;
			this.optionsXb = optionsXb;
			this.optionsZzmm = optionsZzmm;
		} 
	  }).catch((error) => {
	    this.$message({
	  	  message: '数据查询失败！'+error,
	  	  type: 'error',
	    });
	  });
	},
    openOptions(params,data) {
      this.dialog.type = params
      if (params == 'add') {
        this.dialog.title = '新增重点人车辆信息';
      		this.form = {};
      }
      if (params == 'details') {
        this.dialog.title = '重点人车辆信息详情';
      		this.form = data;
      }
      if (params == 'update') {
        this.dialog.title = '重点人车辆信息编辑';
      		this.form = data;
      }
      this.dialog.open = true
    },
	paginationChange (e) {
	  this.pagination = e;
	  this.getList(this.pagination.pageNum, this.pagination.pageSize);
	},
    getList (page, limit) {
      this.axios.post(dxhdUrl.dxhdUrl+'dxhd-clts-zdrcl/selectPage', { 
        current: page,
        size: limit,
        entity: {
          jdcJdchphm: this.form.jdcJdchphms || '',
          jdcClxh: this.form.jdcClxhs || '',
		  zdrxxXm: this.form.zdrxxXms || '',
		  zdrxxGmsfhm: this.form.zdrxxGmsfhms || ''
        }
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }).catch((error) => {
		  this.$message({
		      message: '数据查询失败！'+error,
			  type: 'error',
		  });
      });
    },
	addZdrcl(){
		this.axios.post(dxhdUrl.dxhdUrl+'dxhd-clts-zdrcl/save', this.form,).then((res) => {
		  if(res.code == "1"){
			  this.$message({
				  message: '数据保存成功！',
				  type: 'success',
				  offset:300
			  });
		  }
		  this.dialog.open = false;
		  this.getList(1,10);
		}).catch((error) => {
		  this.$message({
			  message: '数据保存失败！'+error,
			  type: 'error',
		  });
		}); 
	},
	updateZdrcl(){
		this.axios.post(dxhdUrl.dxhdUrl+'dxhd-clts-zdrcl/updateById', this.form,).then((res) => {
		  if(res.code == "1"){
			  this.$message({
				  message: '数据保存成功！',
				  type: 'success',
				  offset:300
			  });
		  }
		  this.dialog.open = false;
		  this.getList(1,10);
		}).catch((error) => {
		  this.$message({
			  message: '数据保存失败！'+error,
			  type: 'error',
		  });
		});
	},
    deleteDate(data) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        type: ''
      }).then(() => {
		this.delete(data.bh);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
	  
    },
	
	delete(bh){
		var params = new URLSearchParams();
		params.append('Id', bh);   
		this.axios.post(dxhdUrl.dxhdUrl+'dxhd-clts-zdrcl/removeById', params,
		).then((res) => {
		  if(res.code == "1"){
			  this.$message({
				  message: '数据删除成功！',
				  type: 'success',
				  offset:300
			  });
			  this.getList(1,10);
		  }
		}).catch((error) => {
		  this.$message({
			  message: '数据删除失败！'+error,
			  type: 'error',
		  });
		});
	},
	
  }
}
</script>

<style lang="scss">
.abfa-box {
  .mb-14 {
    margin-bottom: 14px;
  }

  .mr111 {
    margin-right: 111px;
  }

  .mr58 {
    margin-right: 58px;
  }

}


.abfa-add {
  color: #436AA3;
  line-height: 17px;

  span {
    display: inline-block;
  }
}

.add-attachment {
  background-image: url("../../assets/imgs/add_attachment.svg");
  background-size: 17px 17px;
  background-position: 0 1px;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block;
}

.add_photos {
  background-image: url("../../assets/imgs/add_photos.svg");
  background-size: 17px 17px;
  background-position: 0 1px;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  display: inline-block;
}

.scheme-preview {
  .el-input-group {
    width: 430px;
  }

  .button-submit {
    padding: 6px 22px;
  }
}

.custom-dialog-fill {
  .form-security {
    .el-form-item__content {
      width: 205px !important;
    }
  }

}
.form-security {
  img {
	width: 122px;
	height: 140px;
	background-size: cover;
	background-image: url(../../assets/imgs/revie_picture.png);
  }
}
</style>

